<template>
    <div class="page">
        <div class="search-view">
            <!-- <Input v-model="search.name" clearable placeholder="请输入车名称" style="width: 150px;margin-right:10px;" />
            <Button 
                class="action-btn"
                icon="ios-search" 
                type="primary" 
                :loading="listData.isLoading"
                @click="onClickSearch">查询
            </Button>
            <Button 
                class="action-btn" 
                type="primary"
                @click="onClickClearSearch">清空
            </Button> -->
            <Button 
                class="action-btn"
                icon="ios-add-circle-outline"
                type="primary"
                @click="onClickEdit">新增
            </Button>
        </div>
        <div class="content-view">
            <AccountListView 
                :data="listData"
                @on-action="onActionRow">
            </AccountListView>
        </div>
        <div class="page-view">
            <Page 
                show-elevator
                show-sizer
                show-total
                :current="pageData.currentPage+1" 
                :page-size="pageData.pageSize"
                :total="pageData.totalSize"
                @on-change="changePage"
                @on-page-size-change="changePagesize">
            </Page>
        </div>
        <!-- 操作弹窗 -->
        <AccountEditModal 
            v-if="editData.modalShow"
            :data="editData"
            @on-submit-action="onSubmitActionEdit">
        </AccountEditModal>
    </div>
</template>

<script>
import AccountEditModal from './view/AccountEditModal'
import AccountListView from './view/AccountListView'

import accountService from '@/network/service/AccountService.js'

import { setTimeout } from 'timers';

export default {
    components: {
        AccountListView,
        AccountEditModal
    },
    data() {
        return {
            search: {
                name: null
            },
            pageData: {
                currentPage: 0,
                pageSize: 20,
                totalSize: 0,
            },
            listData: {
                isLoading: false,
                data: []
            },
            editData: {
                modalShow: false,
                actionType:1, // 1新增，2编辑
                isSubmitLoading: false,
                data: {
                    confirmPwd: null,
                }
            }
        }
    },
    mounted(){
        this.getListData();
    },
    methods: {
        onClickEdit(){
            this.editData.modalShow = true;
            this.editData.actionType=1;
            this.editData.data.confirmPwd = null;
        },
        onClickSearch() {
            this.getListData();
        },
        onClickClearSearch() {
            this.search.name = null;
        },
        changePage(page) {
            this.pageData.currentPage = page-1;
            this.getListData();
        },
        changePagesize(pagesize){
            this.pageData.pageSize=pagesize;
            this.getListData();
        },
        getListData() {
            this.listData.isLoading = true;
            let that = this;
            accountService.getAccList(this.pageData.currentPage, this.pageData.pageSize).then(res => {
                let result = res.data;
                let code = result.rescode;
                that.listData.isLoading = false;
                if (code == 100) {
                    that.listData.data=result.data;
                    that.pageData.totalSize = result.totalSize;
                }else {
                    that.$Message.error(result.msg);
                }
            }, error => {
                that.listData.isLoading = false;
                that.$exception.netError(error);
            });
        },
        // 行操作点击
        onActionRow(obj){
            if(obj!=null){
                let action = obj.action;
                let data = obj.data;
                // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                switch(action){
                    case 'edit':
                        this.editData.modalShow = true;
                        this.editData.actionType=2;
                        this.editData.data = data;
                        this.editData.data.confirmPwd = null;
                        break;
                    case 'remove':
                        this.$Modal.confirm({
                            title: '删除账户',
                            content: '<p>您确定要删除该账户吗？</p>',
                            onOk: () => {
                                this.delAcc(data);
                            },
                            onCancel: () => {}
                        });
                        break;
                    case 'enable':
                        this.$Modal.confirm({
                            title: '启用账户',
                            content: '<p>您确定要启用该账户吗？</p>',
                            onOk: () => {
                                this.enableAcc(data);
                            },
                            onCancel: () => {}
                        });
                        break;
                    case 'disable':
                        this.$Modal.confirm({
                            title: '禁用账户',
                            content: '<p>您确定要禁用该账户吗？</p>',
                            onOk: () => {
                                this.disableAcc(data);
                            },
                            onCancel: () => {}
                        });
                        break;
                }
            }
        },
        onSubmitActionEdit(editdata){
            let that = this;
            that.editData.isSubmitLoading = true;
            accountService.saveAcc(this.editData.data.account,this.editData.data.password).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.getListData();
                    that.$Message.success('保存成功');
                    that.editData.modalShow = false;
                    that.editData.isSubmitLoading = false;
                }else {
                    console.log(result.msg);
                }
            }, error => {
                that.$exception.netError(error);
                that.editData.modalShow = false;
                that.editData.isSubmitLoading = false;
            });
        },
        delAcc(data) {
            let that = this;
            accountService.delAcc(data.account).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.getListData();
                    that.$Message.success('删除成功');
                }else {
                    that.$Message.error(result.msg);
                }
            }, error => {
                that.listData.isLoading = false;
                that.$exception.netError(error);
            });
        },
        enableAcc(data){
            let that = this;
            accountService.enableAcc(data.account,1).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.getListData();
                    that.$Message.success('启用成功');
                }else {
                    that.$Message.error(result.msg);
                }
            }, error => {
                that.$exception.netError(error);
            });
        },
        disableAcc(data){
            let that = this;
            accountService.enableAcc(data.account,0).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.getListData();
                    that.$Message.success('禁用成功');
                }else {
                    that.$Message.error(result.msg);
                }
            }, error => {
                that.$exception.netError(error);
            });
        }
    }
}
</script>
<style lang="less" scoped>
.page {
    .search-view {
        margin-bottom: 5px;
        .action-btn {
            margin-right: 10px;
        }
    }
    .content-view {
        
    }
    .page-view {
        text-align: center;
        padding: 5px;
        border-radius: 4px;
        background-color: #fff;
        margin-top: 10px;
    }
}
</style>


